<template lang="">
  <div class="content">
    <div class="main">
      <div class="search" style="border: 0px solid #000;height: 180px;padding-top: 20px;background-color: #fff;">
        <div class="left" style="float: left;">
          <div class="top" style="border: 0px solid #000;margin-top: 0px;text-align: left;margin-bottom: 5px;">
            <el-select v-model="industry" placeholder="请选择行业" clearable v-on:change="getProcessList()">
              <el-option v-for="dict in industryList" :label="dict.dictValue" :value="dict.dictKey">
              </el-option>
            </el-select>
            <el-select v-model="province" placeholder="请选择省份" clearable @change="provinceInput()">
              <el-option v-for="item in dictList" :key="item.dictId" :label="item.dictKey" :value="item.dictKey">
              </el-option>
            </el-select>
            <el-select v-model="salesmanId" placeholder="请选择负责人" clearable @change="realnameInput()">
              <el-option v-for="item in userList" :label="item.realname" :value="item.userId">
              </el-option>
            </el-select>
          </div>
          <div class="bottom" style="border: 0px solid #000;margin-left: 25px;margin-top: 20px;">
            <div class="tit" style="border: 0px solid #000;text-align: left;">
              <span style="font-size: 16px;color: #999;">新增项目：</span>
              <div class="jd" style="border: 0px solid #000;margin-left: 80px;margin-top: -20px;">
                <el-radio-group v-model="timeBucket" @change="timeInput()">
                  <el-radio v-for="(item,index) in timeBucketList" :key="item.index" :label="item.dictKey"
                    :value="item.dictKey">{{item.dictValue}}</el-radio>
                </el-radio-group>
              </div>
            </div>
            <!-- <div class="tit" style="border: 0px solid #000;text-align: left;margin-top: 15px;min-height:22px">
              <span style="font-size: 16px;color: #999;">项目阶段：</span>
              <div class="jd" style="border: 0px solid #000;margin-left: 80px;margin-top: -20px;">
                <el-checkbox-group v-model="processListBox" @change="changeStatusInput()">
                  <el-checkbox v-for="item in processList" :key="item.salesProcessId" :label="item.salesProcessId">
                    {{item.processName}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="tit" style="border: 0px solid #000;text-align: left;margin-top: 15px;">
              <span style="font-size: 16px;color: #999;">跟进阶段：</span>
              <div class="jd" style="border: 0px solid #000;margin-left: 80px;margin-top: -20px;">
                <el-checkbox-group v-model="followListBox" @change="changeStatusInput()">
                  <el-checkbox v-for="(item,index) in followList" :key="item.index" :label="item.dictKey"
                    :value="item.dictKey">
                    {{item.dictValue}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div> -->
          </div>
          <div class="year" style="border: 0px solid #000;margin-top: 0px;text-align: left;margin-bottom: 5px;">
            <div class="block" style="border: 0px solid #000;margin-left: 25px;margin-top: 20px;">
              <el-date-picker v-model="year" @change="getChangeList()" type="year" placeholder="请选择年份">
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="right" style="float: right;">
          <el-input suffix-icon="el-icon-search" v-model="username" placeholder="请输入客户名称" @input="userNameInput()"
            style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;position: relative;left: -240px;">
          </el-input>
          <el-input suffix-icon="el-icon-search" v-model="businessName" placeholder="请输入项目名称"
            @input="businessNameInput()"
            style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;position: relative;left: -230px;">
          </el-input>
          <el-button slot="trigger" size="small" type="danger" class="button" @click="Download"
            style="position: relative;left: 0px;top: -20px;">下载模板</el-button>
          <el-upload class="upload-demo" action="api/crm/sales/insertExcel" :on-success="handleVideoSuccess"
            :file-list="fileList" :show-file-list="false">
            <el-button type="danger" class="button" slot="trigger" size="small"
              style="position: relative;top: -59px;left: 90px;">导入文件

            </el-button>
          </el-upload>
          <el-button type="danger" class="button" slot="trigger" size="small" @click="outPut"
            style="position: relative;top: -97px;left: -20px;">导出文件</el-button>

          <div class="je" v-model="expectList">
            <div class="left" style="float: left;">
              <p style="color: rgb(255, 145, 0);font-size: 28px;">{{total}}</p>
              <p style="font-size: 18px;color: #666;">项目数量</p>
            </div>
            <div class="right" style="float: right;width: 185px;">
              <p style="color: #fe0100;font-size: 28px;">
                {{(isNaN((parseFloat(expectList.data)))?0.00:parseFloat(expectList.data)).toLocaleString('zh-CN',
                { style: 'currency', currency:
                'cny', currencyDisplay: 'symbol' })}}</p>
              <p style="font-size: 18px;color: #666;">项目金额汇总</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tabs">
        <el-table border ref="singleTable" highlight-current-row :data="changeList" tooltip-effect="dark"
          style="width: 100%;cursor: pointer;" @row-dblclick="handleSelectionChange">
          <el-table-column type="index" width="55" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="businessName" label="项目名称" width="280" show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="color:#161616;">
                <el-tag type="danger" effect="dark" size="mini" style="margin-right: 5px;">
                  <span style="color: #fff;font-weight: 600;">{{scope.row.followTotal}}跟进</span>
                </el-tag>{{ scope.row.businessName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="String(salesPriority)" label="项目星级" width="140" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-rate disabled v-model="scope.row.salesPriority">
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column prop="expecteEarn" label="预期金额" width="130" align="right" show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="color:#fe0100;">
                <!-- ￥{{scope.row.expecteEarn}} -->
                {{ (parseFloat( scope.row.expecteEarn)).toLocaleString('zh-CN', { style: 'currency', currency:
                'cny', currencyDisplay: 'symbol' })}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="processName" label="项目阶段" width="80" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="color: rgb(255, 136, 0);">
                {{scope.row.processName}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="followStatus" label="跟进阶段" width="100" align="center" :formatter="Format"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="followTime" label="跟进时间" width="110" align="center" :formatter="dateFormat"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="realname" label="项目负责人" width="90" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="username" label="所属客户" width="200" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="province" label="所属省份" width="80" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="city" label="所属县市" width="80" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="salesSource" label="项目来源" width="100" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="110" align="center" :formatter="dateFormat"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-pagination style="margin:20px;text-align: right;" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :page-size="size" :current-page="current" :page-sizes="[10, 20, 30]"
          :total="total" layout="sizes,prev, pager, next">
        </el-pagination>
      </div>


    </div>
  </div>
</template>
<script>
  import moment from 'moment';
  import ChangeSuccess from '@/components/ChangeSuccess.vue'
  import ChangeDiscard from '@/components/ChangeDiscard.vue'
  export default {
    // name: 'staff',
    inject: ['reload'],
    components: {
      ChangeSuccess, ChangeDiscard
    },
    data() {
      return {
        activeName: 'first',
        current: 1,
        size: 20,
        total: 0,
        currentRow: null,
        changeList: [], //销售机会列表
        processList: [],   //销售过程列表
        processListBox: [],
        industryList: [],   //行业列表
        expectList: [],  //金额
        followList: [],   //跟进状态
        followListBox: [],
        timeBucketList: [],  //时间
        userList: [],
        dictList: [],
        followStatus: '',
        timeBucket: '',
        industry: '',
        dictKey: '',
        businessName: '',
        salesProcessId: '',
        processName: '',
        fileList: [],
        username: '',
        realname: '',
        salesmanId: '',
        province: '',
        year: null
        // expecteEarn:''
      }
    },
    mounted() {
      this.getChangeList()
      this.getIndustryList()
      this.getFollowList()
      this.getTimeBucketList()
      this.getDictList()
      this.getUserList()
    },
    methods: {
      dateFormat: function (row, column) {
        // debugger
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY/MM/DD");
      },
      handleVideoSuccess(res, file) { //获取上传图片地址
        this.fileFlag = false;
        this.fileUploadPercent = 0;
        console.log(file)
        if (res.code == 200) {
          this.$message.success('文件上传成功！');
        } else {
          this.$message.error('文件上传失败，请重新上传！');
        }
      },
      // 下载模板
      Download() {
        let link = document.createElement("a");
        link.target = "_blank"
        link.href = process.env.VUE_APP_SERVER_HOST + "/attach/template/BusinessOpportunityImportTemplate.xlsx";
        link.setAttribute("download", "");
        link.click();
      },
       // 导出文件 
       async outPut() {
        // 解构出参数
        const { current, size, businessName, salesProcessId, industry, followStatus, username, timeBucket, province, salesmanId } = this;
        var data = {
          current: current,
          size: size,
          exportFlag: 1
        }
        if (industry != '') {
          data.industry = industry
        } if (this.processListBox.length > 0) {
          data.salesProcessId = this.processListBox.toString()
        } if (this.followListBox.length > 0) {
          data.followStatus = this.followListBox.toString()
        } if (businessName != '') {
          data.businessName = businessName
        } else if (salesProcessId != '') {
          data.salesProcessId = salesProcessId
        } else if (province != '') {
          data.province = province
        } else if (salesmanId != '') {
          data.salesmanId = salesmanId
        } else if (timeBucket != '') {
          data.timeBucket = timeBucket
        } let result = await this.$API.change.reqChangeList(data)
        if (result.data.code == 200) {
          this.$message.success("导出成功！");
          let link = document.createElement("a");
          link.target = "_blank"
          link.href = process.env.VUE_APP_SERVER_HOST + "/" + result.data.data;
          link.setAttribute("download", "");
          link.click();
        }
        else {
          this.$message(res.message)
        }
      },
      // 金额格式化
      // amountFormat: function (row, column) {
      //   // debugger
      //   var expecteEarn = row[column.property];
      //   if (expecteEarn == null) {
      //     return (parseFloat(0)).toLocaleString('zh-CN', {
      //     style: 'currency', currency:
      //       'cny', currencyDisplay: 'symbol'
      //   });
      //   }
      //   return (parseFloat(expecteEarn)).toLocaleString('zh-CN', {
      //     style: 'currency', currency:
      //       'cny', currencyDisplay: 'symbol'
      //   });
      // },
      //时间格式化
      dateFormat: function (row, column) {
        // debugger
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY/MM/DD");
      },

      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleSizeChange(val) {
        this.size = val
        this.getChangeList()
      },
      handleCurrentChange(val) {
        this.current = val
        this.getChangeList()
      },

      //行业
      async getIndustryList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'industry'
        }
        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.industryList = result.data.data
        // this.$ListToDict.ListToDict(this.industryList)
        this.getProcessList()

      },
      // 时间
      async getTimeBucketList() {
        // 解构出参数
        const { current, size, dictVar, dictKey } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'timeBucket',
        }
        // if (timeBucket != '') {
        //   data.timeBucket = timeBucket
        // } else {
        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.timeBucketList = result.data.data
        // }
      },
      // 获取省列表
      async getDictList() {
        // 解构出参数

        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'province'
        }

        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.dictList = result.data.data

      },
      //负责人
      async getUserList() {
        // 解构出参数
        const { current, size, userType } = this;
        var data = {
          current: 1,
          size: 100,
          userType: "1"
        }
        let result = await this.$API.user.reqUserList(data)
        // this.total = result.data.total;
        this.userList = result.data.data
      },
      // 销售阶段
      async getProcessList() {
        // 解构出参数
        const { current, size, industry } = this;
        var data = {
          current: 1,
          size: 100,
          industry: industry
        }
        // alert(industry)
        var result = await this.$API.change.reqSellList(data)
        this.processList = result.data.data
        this.getChangeList()

      },
      timeInput() {
        this.getChangeList()
      },
      // 获取跟进状态列表
      async getFollowList() {
        // 解构出参数
        const { current, size, followStatus } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'followStatus',
        }
        let result = await this.$API.dict.reqDictList(data)
        this.total = result.data.total;
        this.followList = result.data.data
        this.$ListToUtil.ListToDict(this.followList)
        console.log("-----------------------------")
        console.log(this.$ListToUtil.ListToDict(this.followList))

      },
      Format(row, column) {
        var theDict = this.$ListToUtil.ListToDict(this.followList)
        return theDict[row.followStatus]
      },
      // 搜索
      changeStatusInput() {
        this.getChangeList()
      },
      businessNameInput() {
        this.getChangeList()
      },
      userNameInput() {
        this.getChangeList()
      },

      provinceInput() {
        this.getChangeList()
      },
      realnameInput() {
        this.getChangeList()
      },
      // 获取销售机会列表
      async getChangeList() {
        // 解构出参数
        const { current, size, businessName, salesProcessId, industry, salesStatus, username, timeBucket, province, salesmanId } = this;
        var data = {
          current: current,
          size: size,
          salesStatus: '3',

        }
        if (industry != '') {
          data.industry = industry
        }if (username != '') {
          data.username = username
        }
        if (this.processListBox.length > 0) {
          data.salesProcessId = this.processListBox.toString()
        }
        if (this.followListBox.length > 0) {
          data.followStatus = this.followListBox.toString()
        }if (businessName != '') {
          data.businessName = businessName
        }if (salesProcessId != '') {
          data.salesProcessId = salesProcessId
        }if (province != '') {
          data.province = province
        }if (salesmanId != '') {
          data.salesmanId = salesmanId
        }if (timeBucket != '') {
          data.timeBucket = timeBucket
        }if (this.year != null) {
          data.year = this.year.getFullYear()
        }
        let result = await this.$API.change.reqChangeList(data)
        this.total = result.data.total;
        this.changeList = result.data.data

        let result1 = await this.$API.change.reqExpect(data)
        this.expectList = result1.data
      },

      handleSelectionChange(val) {
        console.log(val)
        this.currentRow = val;
        this.$router.push({
          path: '/details',
          name: 'details',
          query: {
            salesId: this.currentRow.salesId,
          }
        });
      }
    }
  }
</script>
<style scoped>
  @import "../style/style.css";

  .main {
    border: 0px solid #000;
    border-radius: 10px;
    overflow: hidden;
  }

  .search .left {
    padding-left: 20px;
  }

  .search .left>>>.el-select .el-input {
    background-color: #f5f5f7;
    width: 200px;
    margin-left: 20px;
    border-radius: 50px;
    overflow: hidden;
    height: 40px;
  }

  .search .left>>>.el-input__icon {
    color: #000;
    font-weight: 600;
  }

  .search .left>>>.el-select .el-input .el-select__caret {
    color: #000;
  }

  .search .right {
    padding-right: 40px;
  }

  .search>>>.el-input__inner {
    background-color: #f5f5f7;
    /* border: 1px solid #000; */
  }

  /* 
  .el-select,
  .el-input {
    border: 1px solid #b6b6b6;
    border-radius: 50px;
    overflow: hidden;
   width: 300px;
    position: relative;
    top: 0;
    margin-right: 10px;
  }
*/
  .main>>>.el-tabs__nav-wrap {
    background-color: #fff;
    padding-left: 20px;
    height: 50px;
  }

  .main>>>.el-tabs__nav {
    height: 45px;
    padding-top: 5px;
  }

  .je {
    border: 0px solid rgba(238, 238, 238, 0.487);
    height: 110px;
    margin-top: -80px;
    width: 420px;
    margin-left: 100px;
    /* background-color: #eee; */
    line-height: 10px;
  }

  .je .left {
    border: 0px solid #eee;
    width: 100px;
    height: 100%;
    padding-right: 20px;
    /* background-color: rgba(238, 238, 238, 0.487); */
    border-radius: 10px;
    background-color: #fe00000b;
  }

  .je .right {
    border: 0px solid #eee;
    height: 100%;
    padding-left: 30px;
    border-radius: 10px;
    background-color: #fe00000b;

    /* margin-left: 10px; */

  }
</style>